<template>
  <div class="full-box padding-box shadow-box">
    <OperateCommon>
      <template #operate>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="dialog.notice = true"
          >新建通知</el-button
        >
      </template>
    </OperateCommon>
    <div class="table-wrapper">
      <BaseTable
        :columns="columns"
        :showSort="true"
        :tableData="tableData"
        :pages="{
          show: true,
          count: count,
        }"
        :operate="{
          show: true,
          width: 150,
        }"
        @pagination="pageChange"
      >
        <template #operate="{ current }">
          <el-button type="primary" size="mini">发布</el-button>
          <el-button type="primary" size="mini">详情</el-button>
        </template>
      </BaseTable>
    </div>
    <el-dialog
      title="通知下发"
      width="700px"
      :visible.sync="dialog.notice"
      :close-on-click-modal="false"
      @close="dialog.notice = false"
    >
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
            type="textarea"
            v-model="form.content"
            placeholder=""
            :autosize="{
              minRows: 3,
              maxRows: 6,
            }"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="" size="default" @click="dialog.notice = false"
            >取消</el-button
          >
          <el-button type="primary" size="default" @click="send"
            >发送</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import OperateCommon from "@/components/Common/OperateCommon.vue";
import BaseTable from "@/components/Common/BaseTable.vue";
import { required } from "@/utils/eValidate";
import commonList from "@/mixins/commonList";
export default {
  mixins: [commonList],
  components: { OperateCommon, BaseTable },
  data() {
    return {
      columns: columns,
      tableData: [],
      count: 0,
      dialog: {
        notice: false,
      },
      form: {
        title: "",
        content: "",
      },
      rules: {
        title: [required],
        content: [required],
      },
    };
  },
  methods: {
    pageChange(val) {
      this.queryParams.pageNum = val.pageNum;
      this.queryParams.pageSize = val.pageSize;
      this.initData();
    },
    send() {},
  },
};

const columns = [
  {
    prop: "",
    label: "通知标题",
    width: "",
    minWidth: "300",
    align: "",
  },
  {
    prop: "",
    label: "通知内容",
    width: "",
    minWidth: "500",
    align: "",
  },
  {
    prop: "",
    label: "通知状态",
    width: "100",
    minWidth: "",
    align: "",
  },
  {
    prop: "",
    label: "通知时间",
    width: "150",
    minWidth: "",
    align: "",
  },
];
</script>

<style>
</style>